
<template>

 <el-drawer
            class="config-draw"
            :before-close="handleClose"
            :title="typetitle.addTitle"
            :close-on-click-modal="true"
            v-bind="$attrs"
            v-on="$listeners"
            :with-header="false"
            direction="rtl"
            custom-class="demo-drawer"
            ref="drawer"
            size="60%">

            <h2>添加{{typetitle.addTitle}}</h2>

        <!--特色标签-->
        <div class="clear content-form">
            <div>

                <p>共 {{area2adddata.length}} 个标签</p>
            </div>
            <div class="submit-content">
                <div class="area-title">
                    <label>{{typetitle.table1colTitle}}</label>
                    <!--<span class="li-title">{{typetitle.table2colTitle}}</span>
                    <span  class="li-title">序号</span>-->
                </div>

                <div class="area-1">
                    <el-select v-model="nowSelectItem"
                               placeholder="请选择物业类型"
                               class="property-table"
                               allow-create
                               @change="changeItem(nowSelectItem)"

                    >
                        <el-option
                                v-for="item in alltypedata"
                                :key="item.property_type_id"
                                :label="item.property_type_name"
                                :value="item.property_type_id"

                        >
                        </el-option>
                    </el-select>
                   <!-- <input type="text"  v-model="allareadata.property_type_name" disabled>-->

                </div>
                <div class="area-title">
                    <label>{{typetitle.table2colTitle}}</label>
                    <i class="el-icon-plus"  @click="addareali()">新增{{typetitle.table2colTitle}}</i>
                    <textarea  placeholder="例如：小洋房 花园别墅" v-model="moreadddata" class="moreaddinput"></textarea>
                    <button @click="moreadd" class="el-icon-plus">批量添加</button>
                </div>

                <div class="area-2">

                    <ul class="clear">
                        <li v-for="(item,index) in area2adddata"
  				:class="item.state===2?'del-input-item':'canceldel-input-item'"
				>
                            <input type="text" 
			    :placeholder="[index==area2adddata.length-1?'例如联排别墅':'']" 
			    v-model="item.label_name"
			    :class="item.label_name.trim()===''&&issubmit?'iswarninput':''"
			      @blur="edityes()"
			    ></input>
                            <input type="number"
                                   v-model="item.label_sort"
                                   placeholder="序号"
				 @blur="edityes()"
                                   onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^0-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"
                                   onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^0-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}">
                             <i class="el-icon-delete" title="删除" @click="deleteareali(item,index)" v-if="item.state!==2"></i>
                           <i class="el-icon-refresh-right" title="撤销删除" @click="cancledeleteareali(item,index)" v-else></i>
                        </li>

                    </ul>


                </div>

                <div class="demo-drawer__footer clear">
                    <el-button type="primary" size="small" @click="saveSubmit">保存</el-button>

                    <el-button @click="cancelForm" size="small">关 闭</el-button>
                </div>
            </div>
        </div>
</el-drawer>

</template>

<script>

    export default {
        name: "SysPropertyDraw",
        props: ['initstate','typetitle','drawUrl','nowtype','propertyNum'],
        data() {
            return {
                table: false,
                selectAreaData: [],
                loading: false,
                formLabelWidth: "80px",
                timer: null,
                //时间选项
                yudingTime: "",
                currentPage:1,
                /*板块级数据*/
                area2adddata:[],
                newaddinptvalue:{
                    label_name:'',
                    label_sort:0,
                    state:0,
                },
                //提交的总数据
                allareadata:{
                 /*   property_type_name:'商铺',
                    property_type_sort:0,
                    property_type_id:1,
                    parent_location_id:'',*/
                },
                //批量
                moreadddata:'',
                //控制初始化
		issubmit:false,
  		 isEditState:false,

                allProData:[],
                alltypedata:[
                    {property_type_id:1,property_type_name:'住宅'},
                    {property_type_id:2,property_type_name:'写字楼'},
                    {property_type_id:3,property_type_name:'商铺'},
                ],
                nowSelectItem:'',
                nowSelectid:''
            };
        },
        computed:{
            //实时数据

        },
        methods: {
            //切换物业
            changeItem(index){

                this.getSelectLabelData()

            },
            getSelectLabelData(){


               this.axios({
                   method:'get',
                   url:this.drawUrl.geturl
               }).then(data=>{
                   // console.log('查看标签');
                   this.allProData=data.data.data;
                   let arr=this.allProData.filter(item=>item.property_type_id===this.nowSelectItem)
                   // console.log('当前数据~~~~~~~~~~~~~~~~~')

                   this.allareadata=arr[0];
                   this.area2adddata=this.allareadata.labelList
                   // console.log(this.area2adddata)
               })
            },
            handleClose(done) {
                if (this.loading) {
                    return;
                }
            },
            //保存添加
            saveSubmit() {
                //axios调用添加接口
                this.allareadata.children=[...this.area2adddata]
                // console.log('this.allareadata')
                // console.log(this.allareadata)
                let isok=true
                if (isok){
                    this.$message({
                        type:'success',
                        message:'添加成功'
                    })
                    this.$emit('onclose',true)

                }
            },
            //取消

            cancelForm() {
                this.$emit("onclose",false);

            },

            //初始化
          init(){
               
                this.nowSelectItem=this.propertyNum
                    this.getSelectLabelData();
                 


        },
            //添加一条新的：
            edityes(){
                this.isEditState=true
            },
            addareali(){
                this.issubmit=false
                this.isEditState=true
                this.area2adddata.push(this.newaddinptvalue)
                this.newaddinptvalue={
                        label_name:'',
                        label_sort:0,
                        state:0,
                }

            }
            ,
            //改变数据状态2删除
            changedelState(item,type){
                if(type==='删除'){
                    // console.log('删除了')
                    this.isDelState=true
                    for (let i=0;i<this.area2adddata.length;i++){

                        if (this.area2adddata[i].label_id===item.label_id){
                            //修改的

                            this.area2adddata[i].state=2;
                            this.area2adddata=[...this.area2adddata];
                            // console.log('this.area2adddata');
                            // console.log(this.area2adddata);
                            break;
                        }

                    }
                }
                if(type==='撤销'){
                    // console.log('撤销')
                    this.isDelState=true
                    for (let i=0;i<this.area2adddata.length;i++){

                        if (this.area2adddata[i].label_id===item.label_id){
                            //撤销
                            this.$delete( this.area2adddata[i],'state')
                            // console.log('this.area2adddata')
                            // console.log(this.area2adddata)
                            break;
                        }

                    }
                }

            },
            //删除数据
            deleteareali(item,index){
                // console.log('点击删除')
                // console.log(item)
                if (item.label_id!==''&&item.label_id!==undefined){
                    //已有的删除
                    // console.log(1111111111111)
                    this.changedelState(item,'删除')

                }else {
                    //新增的删除
                    this.area2adddata.splice(index,1)


                }

            },
            cancledeleteareali(item,index){
                this.changedelState(item,'撤销')
            },
            //排序
            compare(property){
                return function(a,b){
                    var value1 = a[property];
                    var value2 = b[property];
                    return value1 - value2;
                }
                },
            //批量
            maxsort(){


},
            moreadd(){

               let arr=this.moreadddata.split('、')

                //获得当前最大序号

                new Promise(resolve => {
                    if (this.area2adddata.length>0){
                        let arr=[...this.area2adddata]
                        new Promise(resolve => {
                            let sortarr=arr.sort(this.compare('label_sort'))
                            resolve(sortarr)
                        }).then(data=>{

                           resolve(data[data.length-1].label_sort)
                        })
                    }else resolve(0)
                }).then(maxnum=>{
                    this.isEditState=true
                    arr.forEach((item,i)=>{

                        this.area2adddata.push({
                            label_name:item,
                            label_sort:maxnum+i+1,
 				            state:0//0为添加 1修改 2删除
                     })
                        })
                })
   },
 //获取不同操作状态的数据
typeData(type){
               
     if (type===2){
         //删除
                        let selectArea2Data=this.area2adddata.filter(item=>item.state===type)
                        let arr=[]
                        selectArea2Data.forEach(item=>{
                            arr.push(item.label_id)
                        })
                        return arr
                    }else {
         // console.log(this.area2adddata)
                        let selectArea2Data=this.area2adddata.filter(item=>item.state!==2)
         // console.log('提交修改的特色标签')
         // console.log(selectArea2Data)
                        return {
                            property_type_id:this.nowSelectItem,
                            labelList:selectArea2Data,
                        };
                    }

                },
                                  
 //修改数据。

            //添加请求
            addpost(){
                this.axios({
                    method:'post',
                    data:this.typeData(0),
                    url:this.drawUrl.addurl,
                }).then(data=>{
                    // console.log('添加请求')
                    // console.log(data)
                    if (data.data.code===200){
                        this.$message({
                            type:'success',
                            message:data.data.msg
                        })
                        this.$emit('onclose',true)
                    }
                    else {
                        this.$message({
                            type:'warning',
                            message:data.data.msg
                        })
                        this.$emit('onclose',true)
                    }
                })
            },
            //删除请求
            delPost(){

                this.axios({
                    method:'post',
                    url:this.drawUrl.delurl,
                    data:this.typeData(2),
                }).then(data=>{
                    // console.log('删除成功')
                    // console.log(data)
                    this.$message({
                        type:'success',
                        message:data.data.msg
                    })
                    this.$emit('onclose',true)
                })
            },
            //编辑请求
            editPost(){
                // console.log('修改请求')
                // console.log(this.allareadata)

                    this.axios({
                        method:'post',
                        url:this.drawUrl.editurl,
                        data:this.typeData(1),
                    }).then(data=>{
                        // console.log('修改成功')
                        // console.log(data)
                        this.$message({
                            type:'success',
                            message:data.data.msg
                        })
                        this.$emit('onclose',true)
                    })

            },
            //提交
            saveSubmit(){

                let area2adddataiserror=this.area2adddata.filter(item=>item.label_name.trim()==='')
                // console.log(area2adddataiserror)
                if (area2adddataiserror.length>0){

                    // console.log('报警了')
                    this.issubmit=true
                    this.$message({
                        type:'error',
                        message:'操作失败，有未填写的项目存在。'
                    })
                }else {
                    // console.log(this.issubmit)
                    this.issubmit=false
                    if (this.isDelState&&this.typeData(2).length>0){

                        // console.log('删除的数据~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~')
                        // console.log(this.typeData(2))
                        this.delPost()
                    }
                    if (this.isEditState){
                        // console.log('修改的数据~~~~~~~~~~~~~~~~~')
                        // console.log(this.typeData(1))
                        this.editPost()
                    }
                    if (this.typeData(2).length===0&&!this.isEditState){
                        this.$message({
                            type:'info',
                            message:'未修改任何信息，无须保存'
                        })
                    }

                }
            },
            //取消操作
            cancelForm() {
                this.issubmit=false
                this.$emit("onclose",false);

            },


            



        },


        watch:{
            initstate(){

                if (this.initstate){
                    // console.log(this.initstate)
                    this.init()
                }
            }
        }
    };
</script>

<style lang="less" scoped>
  /* .el-drawer.rtl{
        overflow: scroll;
    }*/
   /*1.显示滚动条：当内容超出容器的时候，可以拖动：*/


</style>